<template>
  <div>
    <canvas id="canvas3" class="-z-999 fixed top-0 left-0"></canvas>

    <modal msg="❤️😘爱你哟宝宝宝宝宝宝宝宝宝宝宝宝，亲亲亲亲亲亲亲亲亲抱抱🤪🤪，抱抱抱抱抱抱抱😘❤️"></modal>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import modal from "./myModal.vue";

var ctx;

var sparks = [];
var fireworks = [];

onMounted(() => {
  ctx = document.querySelector("#canvas3").getContext("2d");
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  var i = 20;
  while (i--) {
    fireworks.push(
      new Firework(Math.random() * window.innerWidth, window.innerHeight * Math.random())
    );
  }
  render();
});
onUnmounted(() => {
  // eslint-disable-next-line no-func-assign
  render = () => {};
});

function render() {
  setTimeout(render, 1000 / 60);
  //   ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
  //   ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  const gradient = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
  gradient.addColorStop(0, "rgba(2, 2, 4, .1)");
  gradient.addColorStop(0.7, "rgba(4, 4, 4, .1)");
  gradient.addColorStop(1, "rgba(50, 50, 50, .1)");
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  for (var firework of fireworks) {
    if (firework.dead) continue;
    firework.move();
    firework.draw();
  }
  for (var spark of sparks) {
    if (spark.dead) continue;
    spark.move();
    spark.draw();
  }

  if (Math.random() < 0.05) {
    fireworks.push(new Firework());
  }
}

function Spark(x, y, color) {
  this.x = x;
  this.y = y;
  this.dir = Math.random() * (Math.PI * 2);
  this.dead = false;
  this.color = color;
  this.speed = Math.random() * 3 + 3;
  this.walker = new Walker({
    radius: 20,
    speed: 0.25,
  });
  this.gravity = 0.25;
  this.dur = this.speed / 0.1;
  this.move = function () {
    this.dur--;
    if (this.dur < 0) this.dead = true;

    if (this.speed < 0) return;
    if (this.speed > 0) this.speed -= 0.1;
    var walk = this.walker.step();
    this.x += Math.cos(this.dir + walk) * this.speed;
    this.y += Math.sin(this.dir + walk) * this.speed;
    this.y += this.gravity;
    this.gravity += 0.05;
  };
  this.draw = function () {
    drawCircle(this.x, this.y, 3, this.color);
  };
}

function Firework(x, y) {
  this.xmove = new Walker({
    radius: 10,
    speed: 0.5,
  });
  this.x = x || Math.random() * ctx.canvas.width;
  this.y = y || ctx.canvas.height;
  this.height = (Math.random() * ctx.canvas.height) / 2;
  this.dead = false;
  this.color = randomColor();

  this.move = function () {
    this.x += this.xmove.step();
    if (this.y > this.height) this.y -= 1;
    else this.burst();
  };
  this.draw = function () {
    drawCircle(this.x, this.y, 1, this.color);
  };
  this.burst = function () {
    this.dead = true;
    var i = 100;
    while (i--) sparks.push(new Spark(this.x, this.y, this.color));
  };
}

function drawCircle(x, y, radius, color) {
  color = color || "#FFF";
  ctx.fillStyle = color;
  ctx.fillRect(x - radius / 2, y - radius / 2, radius, radius);
}

function randomColor() {
  return ["#6ae5ab", "#88e3b2", "#36b89b", "#7bd7ec", "#66cbe1"][
    Math.floor(Math.random() * 5)
  ];
}

function Walker(options) {
  this.step = function () {
    this.direction = 0;
    this.direction = Math.sign(this.target) * this.speed * 0.3;
    this.value += this.direction;
    this.target
      ? (this.target -= this.direction)
      : this.value
      ? this.wander
        ? (this.target = this.newTarget())
        : (this.target = -this.value)
      : (this.target = this.newTarget());
    return this.direction;
  };

  this.newTarget = function () {
    return Math.round(Math.random() * (this.radius * 2) - this.radius);
  };

  this.start = 0;
  this.value = 0;
  this.radius = options.radius;
  this.target = this.newTarget();
  this.direction = Math.sign(this.target);
  this.wander = options.wander;
  this.speed = options.speed || 1;
}
</script>
